import { useEffect, useState } from "react";
import {
  View,
  StyleSheet,
  Modal,
  Text,
  TouchableHighlight,
  ScrollView,
} from "react-native";

export default () => {
  const [modalVisible, setModalVisible] = useState(false);
  useEffect(() => {
    setModalVisible(true);
  }, []);
  return (
    <View style={styles.container}>
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.title}>用户协议和隐私政策说明</Text>
            <ScrollView style={styles.agreement}>
              <Text style={styles.content}>
                请您充分阅读并理解
                <Text style={styles.highLight}>《用户协议》</Text>和
                <Text style={styles.highLight}>隐私政策</Text>
                我们非常重视您的隐私和个人信息保护。在您使用的过程中，我们会对您的部分个人信息进行收集和使用。
              </Text>
              <Text style={styles.content}>
                1、设备信息（如型号、系统版本、唯一标识等 ）、位置信息（含精准 /
                粗略定位，用于功能适配、服务推荐
                ）、软件安装列表（辅助分析使用习惯、优化兼容性 ）；
              </Text>
              <Text style={styles.content}>
                2、您主动填写的信息（如注册账号、服务预约时提交的姓名、联系方式、地址等
                ），及使用过程中产生的行为数据（如浏览记录、交易信息，用于提升服务体验
                ）。
              </Text>
              <Text style={styles.content}>
                为保障您的权益与服务正常提供，若您继续使用，即视为同意协议与政策内容。您可自主选择
                “同意” 或 “不同意”，不同意将无法使用本服务。
              </Text>
            </ScrollView>

            <Text style={styles.refused} onPress={() => {}}>
              不同意
            </Text>

            <TouchableHighlight
              style={{ ...styles.openButton }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text style={styles.agree}>同意</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  centeredView: {
    flex: 1,
    alignItems: "center",
    marginTop: 180,
  },
  modalView: {
    height: 360,
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    backgroundColor: "#f0685c",
    borderRadius: 20,
    padding: 10,
    elevation: 2,
    width: 260,
    marginTop: 10,
  },
  agree: {
    color: "white",
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
  agreement: {
    flex: 1,
    overflow: "scroll",
    marginBottom: 15,
  },
  refused: {
    color: "#888",
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
  title: {
    marginBottom: 15,
    textAlign: "center",
    fontSize: 22,
    fontWeight: 700,
  },
  content: {
    fontSize: 16,
  },
  highLight: {
    color: "#ec6f59",
  },
});